<template>
  <div class="pageBox">
    <!-- <div class="contentBox">
      <el-form
        :model="formInline"
        label-width="100px"
        :label-position="`right`"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="日期范围">
              <el-date-picker
                size="mini"
                v-model="formInline.dataDateRange"
                type="daterange"
                @change="sendRequest"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数据来源">
              <el-select
                size="mini"
                v-model="formInline.terminalType"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="量测指标">
              <el-select
                size="mini"
                v-model="formInline.appVersionConsistency"
                placeholder="请选择"
                @change="sendRequest"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
      </el-form>
    </div> -->
    <div ref="chartContainer" style="width: 1080px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getChartData } from "@/api";
import { echartsOptions } from "@/chartOptions";
import { formatDate } from "@/utils/timeFormat";
import measurement from "@/jsonData/measurement.json";
export default {
  data() {
    return {
      formInline: {
        stationName: "", // 变电站名称
        lineName: "", // 线路名称
        transformerName: "", // 配变名称
        areaCode: "", // 台区编号
        terminalESN: "", // 终端ESN
        terminalType: "", // 终端类型
        terminalManufacturer: "", // 终端厂家
        commissioningDate: "", // 终端投运日期
        dataDateRange: "", // 数据日期范围
        commissioningStatus: "", // 投运状态
        scoreRange: "", // 综合得分范围
        appVersionConsistency: "", // app版本是否一致
        onlineRateRange: "", // 在线率范围
        frequentRetirement: "", // 是否频繁投退
      },
      options: measurement,
    };
  },
  mounted() {
    this.sendRequest();
  },

  methods: {
    sendRequest() {
      const checkData =
        measurement.find(
          (x) => x.value === this.formInline.appVersionConsistency
        ) || {};
      const date = this.formInline.dataDateRange;
      const startTime = Array.isArray(date) ? date[0] : null;
      const endTime = Array.isArray(date) ? date[1] : null;
      const params = {
        startTime: startTime && new Date(startTime).getTime(),
        endTime: endTime && new Date(endTime).getTime(),
        ...checkData,
      };
      getChartData(params).then((res) => {
        if (res.success) {
          res.data.length && this.initChart(res.data);
        }
      });
    },
    initChart(data) {
      const chartDom = this.$refs.chartContainer;
      const myChart = echarts.init(chartDom);
      let xAxisData = [];
      let series = [];
      data.forEach((item, mIndex) => {
        const seriesItem = {};
        Object.keys(item).forEach((key, index) => {
          if (index !== 0) {
            return;
          }
          const itemData = item[key];
          seriesItem.name = key;
          seriesItem.type = "line";
          seriesItem.smooth = true;
          seriesItem.data = itemData.map((x) => x.value);
          if (mIndex === 0) {
            itemData.forEach((x) => {
              xAxisData.push(formatDate(new Date(x.time), "hh:mm"));
            });
          }
        });
        series.push(seriesItem);
      });
      const option = echartsOptions(xAxisData, series);
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table th {
  background-color: #118b17 !important; /* Change the color of table header */
  color: white !important; /* Optionally change text color for better contrast */
}
::v-deep.el-form-item__label {
  font-size: 14px !important;
}
::v-deep.el-button {
  font-size: 12px !important;
  border: none !important;
}
.pageBox {
  padding: 12px;
}
.paginationBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
::v-deep .el-input .el-input--mini .el-input--suffix {
  width: 150px;
}
::v-deep.el-button--primary {
  background-color: #118b7d !important;
  border-color: #118b7d !important;
}

</style>
